<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-form ref="carForm" label-width="80px" :model="carForm">
        <el-row :gutter="24" class="oneBox">
          <el-col :span="8">
            <el-form-item label="车辆管理:" prop="id">
              <el-input v-model="carForm.id" type="text" autocomplete="off" placeholder="请输入车型编号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应载重量:" prop="allowableLoad">
              <el-select v-model="carForm.allowableLoad" placeholder="请选择应载重量" style="width:260px">
                <el-option v-for="item in tonneList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="应载重量:" prop="allowableVolume">
              <el-select v-model="carForm.allowableVolume" placeholder="请选择应载体积" style="width:260px">
                <el-option v-for="item in blukList" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="oneBox">
          <el-col :span="8">
            <el-form-item label="车辆类型:" prop="name">
              <el-input v-model="carForm.name" type="text" autocomplete="off" placeholder="请输入车型类型" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" style="background-color:#e15536;width:80px" @click="searchFn">搜索</el-button>
              <el-button style="width:80px" @click="resetFn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-button type="primary" style="width:100px; margin-bottom: 20px;" @click="isShow = true">新增车型</el-button>
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column
          type="index"
          label="序号"
          width="60"
        >
          <template v-slot="{$index}">{{ (pageData.page-1)*pageData.pageSize+$index+1 }}</template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="车型编号"
          width="180"
        />
        <el-table-column
          prop="name"
          label="车辆类型"
          width="150"
        />
        <el-table-column
          prop="num"
          label="车型数量"
          width="120"
        />
        <el-table-column
          prop="allowableLoad"
          label="应载重量(吨)"
          width="120"
        />
        <el-table-column
          prop="allowableVolume"
          label="应载体积(立方米)"
          width="150"
        />
        <el-table-column
          prop="measureLong"
          label="长(米)"
          width="100"
        />
        <el-table-column
          prop="measureWidth"
          label="宽(米)"
          width="100"
        />
        <el-table-column
          prop="measureHigh"
          label="高(米)"
          width="100"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template #default="{row}">
            <el-button class="edit" type="text" style="color:#4ea1ff" @click="openDialog('edit',row.id)">编辑</el-button>
            <el-divider direction="vertical" />
            <el-button class="del" type="text" style="color:#f56c6c" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" class="footer">
        <el-pagination
          :page-sizes="[2,10, 20, 30, 50]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </el-row>
    </el-card>
    <!-- 添加弹层 -->
    <el-dialog title="新增车型" :visible.sync="isShow" width="40%">
      <el-form ref="addForm" style="padding:0 30px" :model="addForm" :rules="rules">
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="addForm.name" maxlength="15" placeholder="请输入车辆类型" autocomplete="off" style="width:70%" />
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <template>
            <el-input v-model="addForm.allowableLoad" maxlength="10" type="text" autocomplete="off" style="width:70%" placeholder="请输入车辆载重" suffix /><span>吨</span>
          </template>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model="addForm.allowableVolume" maxlength="10" autocomplete="off" style="width:70%" placeholder="请输入车辆体积" />
        </el-form-item>
        <el-form-item label="长" style="padding:0 42.5px" prop="measureLong">
          <el-input v-model="addForm.measureLong" autocomplete="off" maxlength="10" style="width:84%;" />
        </el-form-item>
        <el-form-item label="宽" style="padding:0 42.5px" prop="measureWidth">
          <el-input v-model="addForm.measureWidth" autocomplete="off" maxlength="10" style="width:84%;" />
        </el-form-item>
        <el-form-item label="高" style="padding:0 42.5px" prop="measureHigh">
          <el-input v-model="addForm.measureHigh" autocomplete="off" maxlength="10" style="width:84%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFn">确定</el-button>
        <el-button @click="resetAddForm">取消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹层 -->
    <el-dialog title="编辑车型" :visible.sync="isShow" width="40%">
      <el-form ref="addForm2" style="padding:0 30px" :model="addForm" :rules="rules">
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="addForm.name" maxlength="15" placeholder="请输入车辆类型" autocomplete="off" style="width:70%" />
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model="addForm.allowableLoad" maxlength="10" autocomplete="off" style="width:70%" placeholder="请输入车辆载重" />
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model="addForm.allowableVolume" maxlength="10" autocomplete="off" style="width:70%" placeholder="请输入车辆体积" />
        </el-form-item>
        <el-form-item label="长" style="padding:0 42.5px" prop="measureLong">
          <el-input v-model="addForm.measureLong" autocomplete="off" maxlength="10" style="width:84%;" />
        </el-form-item>
        <el-form-item label="宽" style="padding:0 42.5px" prop="measureWidth">
          <el-input v-model="addForm.measureWidth" autocomplete="off" maxlength="10" style="width:84%;" />
        </el-form-item>
        <el-form-item label="高" style="padding:0 42.5px" prop="measureHigh">
          <el-input v-model="addForm.measureHigh" autocomplete="off" maxlength="10" style="width:84%;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editFn">确定</el-button>
        <el-button @click="isShow = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCarManageListApi, delCarManageApi, addCarManageApi, editCarManageApi, detailsCarManageApi } from '@/api/carmanage'
export default {
  data() {
    return {
      tableData: [], // table数据
      headerCellStyle: { // 表头单元格样式
        backgroundColor: '#f8faff'
      },
      pageData: {
        page: 1, // 当前页
        pageSize: 10 // 当前页渲染多少条数据
      },
      total: 0, // 总数量
      // 车辆表单数据
      carForm: {
        id: '',
        name: '',
        allowableLoad: '',
        allowableVolume: ''
      },
      isShow: false, // Dialog弹窗
      // 重量数据
      tonneList: [
        {
          value: 'RANGE_LEVEL_1',
          label: '<1.8（吨）'
        },
        {
          value: 'RANGE_LEVEL_2',
          label: '1.8-6（吨）'
        },
        {
          value: 'RANGE_LEVEL_3',
          label: '6-14（吨）'
        },
        {
          value: 'RANGE_LEVEL_4',
          label: '14-30（吨）'
        },
        {
          value: 'RANGE_LEVEL_5',
          label: '30-50（吨）'
        },
        {
          value: 'RANGE_LEVEL_6',
          label: '50-100（吨）'
        },
        {
          value: 'RANGE_LEVEL_7',
          label: '100>（吨）'
        }
      ],
      // 体积数据
      blukList: [
        {
          value: 'RANGE_LEVEL_1',
          label: '<3（m³）'
        },
        {
          value: 'RANGE_LEVEL_2',
          label: '3-5（m³）'
        },
        {
          value: 'RANGE_LEVEL_3',
          label: '5-10（m³）'
        },
        {
          value: 'RANGE_LEVEL_4',
          label: '10-15（m³）'
        },
        {
          value: 'RANGE_LEVEL_5',
          label: '15-30（m³）'
        },
        {
          value: 'RANGE_LEVEL_6',
          label: '30-50（m³）'
        },
        {
          value: 'RANGE_LEVEL_7',
          label: '50-80（m³）'
        },
        {
          value: 'RANGE_LEVEL_8',
          label: '80-150（m³）'
        },
        {
          value: 'RANGE_LEVEL_9',
          label: '150>（m³）'
        }
      ],
      loading: false, // 加载loading效果
      addForm: {
        allowableLoad: '', // 重量
        allowableVolume: '', // 体积
        measureHigh: '', // 高
        measureLong: '', // 长
        measureWidth: '', // 宽
        name: '' // 车辆类型名称
      },
      rules: {
        name: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' },
          { pattern: /^(?:[1-9]|[1-9][0-9]|100)$/, message: '只能输入1-100之间的整数', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' },
          { pattern: /^(?:[1-9]|[1-9][0-9]|100)$/, message: '只能输入1-100之间的整数', trigger: 'blur' }
        ],
        measureLong: [
          { validator: (rule, value, callback) => {
            if (value > 100) {
              callback(new Error('长最多只能输入100，请重新输入'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        measureWidth: [
          { validator: (rule, value, callback) => {
            if (value > 100) {
              callback(new Error('宽最多只能输入100，请重新输入'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ],
        measureHigh: [
          { validator: (rule, value, callback) => {
            if (value > 100) {
              callback(new Error('高最多只能输入100，请重新输入'))
            } else if (value === Number) {
              callback(new Error('只能输入数字类型，最多保留两位小数，请重新输入'))
            } else {
              callback()
            }
          }, trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getCarManageList()
  },
  methods: {
    // 删除
    async delFn(id) {
      this.$confirm('确认要删除车型吗？', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 1.调用删除接口
        await delCarManageApi(id)
        // 2.删除成功提示信息
        this.$message.success('删除成功')
        // 3.重新渲染数据
        this.getCarManageList()
      }).catch(() => {
        this.$message.info('已取消')
      })
    },
    // 获取页面数据
    async getCarManageList() {
      this.loading = true
      const res = await getCarManageListApi({ ...this.carForm, ...this.pageData })
      // console.log(res)
      this.tableData = res.items
      this.total = +res.counts
      this.loading = false
    },
    // 获取分页点击数据
    handleCurrentChange(val) {
      // 实现分页数据加载
      this.pageData.page = val
      // 重新获取最新数据
      this.getCarManageList()
    },
    // 获取分页加载多少数据
    handleSizeChange(val) {
      // 实现分页一页加载多少数据的
      this.pageData.pageSize = val
      // 重新获取数据
      this.getCarManageList()
    },
    // 搜索
    searchFn() {
      // 重新渲染数据
      this.getCarManageList()
    },
    // 重置表单
    resetFn() {
      // 重置
      this.$refs.carForm.resetFields()
      // 重新获取数据
      this.getCarManageList()
    },
    // 清空添加表单数据
    resetAddForm() {
      this.$refs.addForm.resetFields()
      this.isShow = false
    },
    // 添加车辆
    async addFn() {
      // 1.显示弹框
      this.isShow = true
      // 2.添加的时候校验数据
      await this.$refs.addForm.validate()
      // 3.发送请求添加数据
      await addCarManageApi(this.addForm)
      // 4.添加成功信息
      this.$message.success('操作成功!')
      // 5.清空表单
      this.resetAddForm()
      // 6.重新获取数据
      this.getCarManageList()
    },
    // 点击编辑弹框
    async openDialog(type, id) {
      if (type === 'edit') {
        this.addForm = await detailsCarManageApi(id)
      }
      this.isShow = true
    },
    // 编辑车辆
    async editFn() {
      // 2.编辑成功后校验数据
      await this.$refs.addForm2.validate()
      // 3.编辑接口发送数据
      await editCarManageApi(this.addForm)
      // 4.编辑成功信息
      this.$message.success('操作成功!')
      // 5.清空表单
      this.resetAddForm()
      // 6.重新获取数据
      this.getCarManageList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .box-card{
    border: none;
    margin-bottom: 20px;
  }
  .oneBox{
    padding: 0 25px;
  }
  .footer{
    padding-top: 20px;
  }
  .dialog-footer{
    display: flex;
    justify-content: center;
  }
}

</style>
